<template>
	<div class="container">
		<div class="login_wraper">
			<div class="login_left">
				<div class="title">欢迎使用</div>
				<img class="logo_img" src="../images/zxwy.44bfa70d.jpg">
				<p>智学无忧商城后台登录</p>
			</div>
			<div class="login_right">
				<div class="login_section">
					<h4>登录</h4>
					<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="login-form">
						<el-form-item prop="username">
							<div class="input_prepend">
								<i class="el-icon-user"></i>
							</div>
							<el-input type="text" v-model="ruleForm.username" placeholder="请输入用户名" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item prop="password">
							<div class="input_prepend">
								<i class="el-icon-key"></i>
							</div>
							<el-input type="password" placeholder="请输入密码" v-model="ruleForm.password" show-password autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item>
							<div class="input_prepend">
								<i class="el-icon-position"></i>
							</div>
							<el-input class="identifying" type="text" placeholder="输入验证码" v-model="ruleForm.verifyCode" autocomplete="off"></el-input>
							<div class="el-input-group__append"><span>验证码</span></div>
						</el-form-item>
						<el-form-item>
							<el-checkbox v-model="checked">记住密码</el-checkbox>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" plain @click="submitForm('ruleForm')">登录</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Base64 from '../util/Base64';
	import Cookies from "js-cookie";
	import {login} from "../components/api.js"
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				let reg = /^[a-zA-Z0-9_-]{4,18}$/;
				if (value === '') {
					callback(new Error('输入内容不能为空'));
				} else if (!reg.test(value)) {
					callback(new Error('请输入字母、数字、下划线,长度不能少于4'));
				} else if (value != 'admin') {
					callback(this.$message.error("用户名或密码错误"));
				}
				callback();
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('输入内容不能为空'));
				} else if (value.length < 6) {
					callback(new Error('管理员密码长度应大于6'));
				} else if (value != 123456) {
					callback(this.$message.error("用户名或密码错误"));
				}
				callback();
			};
			return {
				adminInfo: [],
				checked: false,
				ruleForm: {
					username: '',
					password: '',
					verifyCode: 666666
				},
				rules: {
					username: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					password: [{
						validator: validatePass2,
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			getCookies() {
				let that = this;
				//获取保存在Cookies用户名和密码
				let username = Cookies.get("username");
				let password = Cookies.get("password");
				if (username && password) {
					that.checked = true; //记住密码
					that.ruleForm.username = Base64.decode(username); //解密
					that.ruleForm.password = Base64.decode(password);
				}
			},
			submitForm(formName) {
				let _this = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// console.log(_this.checked)
						// 记住密码
						if (_this.checked == true) { //加密
							let username = Base64.encode(_this.ruleForm.username);
							let password = Base64.encode(_this.ruleForm.password);
							Cookies.set("username", username);
							Cookies.set("password", password);
							// console.log(username,password)
						} else { //否则移除
							Cookies.remove("username");
							Cookies.remove("password");
						}
						login(_this.ruleForm).then((res) => {
							console.log(res)
							let token = res.data.data;
							// 设置taken过期时间30min
							var millisecond = new Date().getTime();
							var expiresTime = new Date(millisecond + 60 * 1000 * 30);
							// 保存到本地存储
							sessionStorage.setItem("token", token);
							Cookies.set('token', token, {
								expires: expiresTime
							});
							if (_this.$route.query.order === 'login') {
								_this.$router.go(-1)
							} else {
								_this.$router.push('/index')
							}
							_this.$message.success('登录成功！');
						})
					} else {
						return false;
					}
				});
			},

		},
		created() {
			this.getCookies()
		}
	}
</script>

<style>
	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		position: relative;
		margin: 0 auto;
		padding: 0;
		background: url(../images/cloud.bef3ccbc.jpg) 0 bottom repeat-x #049ec4;
	}

	.login_wraper {
		margin: 0 auto;
		width: 1000px;
		box-shadow: -4px 5px 10px rgb(0 0 0 / 40%);
	}

	/* 左边 logo*/
	.login_left {
		width: 50%;
		height: 500px;
		background-color: #409eff;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		justify-content: center;
		color: #fff;
		float: left;
		position: relative;
		flex-direction: column;
		align-items: center;
		display: flex;
	}

	.login_left .title {
		position: absolute;
		left: 25px;
		top: 25px;
		width: 100%;
		color: #fff;
		font-weight: 200;
		opacity: 0.9;
		font-size: 18px;
		overflow: hidden;
	}

	.login_left .logo_img {
		width: 100px;
		height: 100px;
		line-height: 100px;
		border-radius: 50%;
		text-align: center;
	}

	.login_left p {
		margin-top: 60px;
		text-align: center;
		color: #fff;
		font-weight: 300;
		letter-spacing: 2px;
		font-size: 25px;
	}

	/* 右边登录 */
	.login_right {
		width: 50%;
		height: 500px;
		border-left: none;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		position: relative;
		align-items: center;
		display: flex;
		float: left;
		background-color: #f5f7fa;
	}

	.login_section {
		margin: 0 auto;
		width: 65%;
	}

	.login_section h4 {
		color: #333;
		font-weight: 500;
		font-size: 22px;
		text-align: center;
		letter-spacing: 4px;
		margin-bottom: 40px;
	}

	.el-form-item__content {
		margin: 0 !important;
		display: inline-table;
	}

	.input_prepend {
		color: #909399;
		vertical-align: middle;
		display: table-cell;
		position: relative;
		border-radius: 4px;
		padding: 0 20px;
		width: 1px;
		white-space: nowrap;
	}

	.login-form .el-input {
		width: 250px;
	}

	.login-form .el-input input {
		background: transparent;
		border: none;
		border-radius: 0;
		color: #333;
		border-bottom: 1px solid #ebedf2;
	}

	.login-form .el-form-item__error {
		padding-top: 0px;
		left: 55px;
	}

	.el-checkbox {
		margin-left: 20px !important;
	}

	.el-input-group__append {
		border: none !important;
	}

	.login-form .identifying {
		width: 150px;
	}

	.el-input-group__append span {
		display: block;
		width: 60px;
		font-size: 12px;
		text-align: center;
		cursor: pointer;
	}

	.el-form-item__content {}

	.el-button--primary.is-plain {
		width: 350px !important;
		color: #409EFF;
		background-color: #fff;
		border-color: #b3d8ff;
		font-size: 18px;
		letter-spacing: 2px;
		font-weight: 300;
	}
</style>
